<template>
  <div>
    <el-card  style="margin-bottom: 20px;border-radius: 10px">
      <el-row>
        <el-col :span="6">
          <el-input v-model="option.username"
          >
            <template slot="prepend">用户名</template>
          </el-input>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-input v-model="option.address"
          >
            <template slot="prepend">地区</template>
          </el-input>
        </el-col>
        <el-col :span="4" :offset="1">
          <CarTypeSelect v-model="option.carType"></CarTypeSelect>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button-group style="width: 100%">
            <el-button type="success" style="width: 50%" @click="search"><i class="el-icon-search"></i></el-button>
            <el-button style="width: 50%" @click="reLoad"><i class="el-icon-refresh"></i></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-card>




    <el-table :data="move"
              :header-row-class-name="headerClass"
              :cell-class-name="rowClass"
              style="width: 100%; border-radius:13px 13px 0px 0px;"
              height="580"
    >
      <el-table-column label="搬家信息">
        <el-table-column label="地区"
                         width="220"
                         prop="area" />
        <el-table-column label="车辆类型">
          <template slot-scope="scope">
            <CarTypeInfo :car-type="scope.row.car_type" />
          </template>
        </el-table-column>
        <el-table-column label="搬家时间"
                         width="200"
                         prop="move_date" />
      </el-table-column>
      <el-table-column label="客户信息">
        <el-table-column label="联系人" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.contact}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone" />
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <MoveStatus :move-status="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" />
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑信息</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card style="border-radius:0px 0px 13px 13px;border-top-width: 0px;background-color: #f1f2f6;" :body-style="{ padding: '10px' }">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="copyMove.length"
      >
      </el-pagination>
    </el-card>

    <!--编辑搬家信息弹层-->
    <el-dialog title="更改状态" :visible.sync="dialogFormVisibleEdit" append-to-body>
      <el-form :model="formData" label-position="right" label-width="100px">
        <el-form-item label="地区" type="area">
          <el-input v-model="formData.area" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型" type="car_type">
          <el-input v-model="formData.car_type" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="搬家时间" type="move_date">
          <el-input v-model="formData.move_date" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系人" type="contact">
          <el-input v-model="formData.contact" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号" type="phone">
          <el-input v-model="formData.phone" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="状态" type="status">
<!--          <el-input v-model="formData.status"></el-input>-->
          <MoveStatusSelect v-model="formData.status"></MoveStatusSelect>
        </el-form-item>
        <el-form-item label="用户名" type="username">
          <el-input v-model="formData.username" disabled="true"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit=false">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {getMoveInfo, findById, modifyMoveInfo, delMoveInfo} from "@/api/move";
import CarTypeInfo from "@/components/CarTypeInfo";
import MoveStatus from "@/components/MoveStatus";
import MoveStatusSelect from "@/components/MoveStatusSelect";
import CarTypeSelect from "@/components/CarTypeSelect";

export default {
  name: "index",
  components: {CarTypeSelect, MoveStatusSelect, MoveStatus, CarTypeInfo},
  data(){
    return{
      page:{
        size:10,
        index:1
      },
      move:[],
      copyMove:[],
      formData:{},
      dialogFormVisibleEdit: false,
      option:{
        username:'',
        address:'',
        carType:''
      }
    }
  },
  //获取所有搬家信息
  methods: {
    handleSizeChange(val) {
      this.page.size = val
      this.pageHelper()
    },
    pageHelper() {
      const index = this.page.index
      const size = this.page.size
      this.move = this.copyMove.slice(size*(index-1),size*index)
    },
    handleCurrentChange(val) {
      this.page.index = val
      this.pageHelper()
    },
    reLoad() {
      this.getAllMove()
      this.option = {
        username:'',
        address:'',
        carType:''
      }
    },
    search() {
      const deleteList = (array,moveId) =>{
        for (const a in array) {
          if (array[a].move_id === moveId) {
            return a
          }
        }
      }

      const username = this.option.username
      const address = this.option.address
      const carType = this.option.carType
      const moves = []
      this.copyMove.forEach((move)=>{
        moves.push(move)
      })

      this.copyMove.forEach((move)=>{
            if (username !== '') {
              if (move.username.indexOf(username) === -1) {
                moves.splice(deleteList(moves,move.move_id),1)
              }
            }
            if (address !== '') {
              if (move.area.indexOf(address) === -1) {
                moves.splice(deleteList(moves,move.move_id),1)
              }
            }
            if (carType !== '' ) {
              if (carType !== move.car_type) {
                moves.splice(deleteList(moves,move.move_id),1)
              }
            }
      })

      this.move = moves

    },
    rowClass({row,column}) {
      if (column.label!=='操作') {
        if (row.status === 0) {
          return 'table-row0'
        } else if (row.status === 1) {
          return 'table-row1'
        } else if (row.status === 3) {
          return 'table-row3'
        } else if (row.status === 2){
          return 'table-row2'
        }
      }
    },
    headerClass({rowIndex}) {
      if (rowIndex===1) {
        return 'table-header2'
      }
      return 'table-header'
    },
    getAllMove() {
      getMoveInfo().then(res => {
        this.move = res.data.slice(0,10)
        this.copyMove = res.data
      })
    },
    //打开编辑页面
    handleUpdate(row) {
      this.dialogFormVisibleEdit = true
      findById(row.move_id).then((res) => {
        this.formData = res.data[0]
        console.log(this.formData)
      })
    },
    // 处理编辑
    handleEdit(){
      modifyMoveInfo(this.formData).then((res) => {
        if (res.code === 200) {
          this.dialogFormVisibleEdit = false
          this.$message.success(res.msg)
        }else {
          this.$message.error("修改失败")
        }
      }).finally(() => {
        this.getAllMove()
      })
    },
    handleDelete(row){
      this.$confirm('是否永久删除此条数据','提示',{type: 'info'}).then(() => {
        const move_id = {
          move_id: row.move_id
        }
        delMoveInfo(move_id).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error('删除失败')
          }
        }).finally(() => {
          this.getAllMove()
        })
      }).catch(() => {
        this.$message.info('取消删除操作')
      })
    }
  },
  mounted() {
    this.getAllMove()
    this.pageHelper()
  }
}
</script>

<style scoped>
.el-table>>>.table-header  .el-table__cell {
  background-color: #589ff8;
  color: #ffffff;
}
.el-table>>>.table-header2  .el-table__cell {
  background-color: #fed330;
  color: #ffffff;
}
.el-table>>>.table-row0 {
  background-color: #ffffff;
  pointer-events: none;
}
.el-table>>>.table-row1 {
  background-color: #3742fa;
  pointer-events: none;
  color: white;
}
.el-table>>>.table-row2{
  background-color: #57606f;
  pointer-events: none;
  color: white;
}
.el-table>>>.table-row3 {
  background-color: #ff4757;
  pointer-events: none;
  color: white;
}
.el-table>>>.table-row3:hover {
  background-color: #3742fa;
}
.el-table >>> tbody tr:hover > td {
  background-color: #ffffff!important;
  color: #75767a;
}
</style>
